<template>
  <el-dialog
    title="信息审核"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    width="800px"
    append-to-body
    class="borderb_dia"
  >
    <div class="cardbox mb_10">
      <div class="cardheader aligncenter flex f-16 c_000">
        <div class="line mr_8"></div>
        基础信息
      </div>
      <div class="cardbody">
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">主体类型：</div>
          <div class="item_content overflowtext">{{ form.type_name }}</div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">主体名称：</div>
          <div class="item_content overflowtext">{{ form.type_text }}</div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">收款账号类型：</div>
          <div class="item_content overflowtext">账户主体收款</div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">开户名称：</div>
          <div class="item_content overflowtext">{{ form.invoice_name }}</div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">营业执照号码：</div>
          <div class="item_content overflowtext">{{ form.bln }}</div>
        </div>
      </div>
    </div>

    <div class="cardbox mb_10">
      <div class="cardheader aligncenter flex f-16 c_000">
        <div class="line mr_8"></div>
        收款账户信息
      </div>
      <div class="cardbody">
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">开户名称：</div>
          <div class="item_content overflowtext">{{ form.bln_name }}</div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">营业执照号码：</div>
          <div class="item_content overflowtext">{{ form.bln }}</div>
        </div>
        <div class="flex aligncenter itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">营业执照照片：</div>
          <div class="item_content overflowtext">
            <img :src="form.bl_photo" alt="" class="imgitem mr_10" @click="getBigImg(form.bl_photo)"/>
          </div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">银行账号：</div>
          <div class="item_content overflowtext">{{ form.bankcard }}</div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">开户银行所在地：</div>
          <div class="item_content overflowtext">{{ form.bank_province }}-{{ form.bank_city }}</div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">开户银行：</div>
          <div class="item_content overflowtext">{{ form.bank_name }}</div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">开户支行：</div>
          <div class="item_content overflowtext">{{ form.bank_branch }}</div>
        </div>
        <div class="flex aligncenter itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">开户证明照片：</div>
          <div class="item_content overflowtext">
            <img :src="form.bank_prove_photo" alt="" class="imgitem mr_10" @click="getBigImg(form.bank_prove_photo)"/>
          </div>
        </div>
      </div>
    </div>

    <div class="cardbox mb_10">
      <div class="cardheader aligncenter flex f-16 c_000">
        <div class="line mr_8"></div>
        结算单邮箱
      </div>
      <div class="cardbody">
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">邮箱地址：</div>
          <div class="item_content overflowtext">{{ form.email }}</div>
        </div>
      </div>
    </div>
    <div class="cardbox mb_10">
      <div class="cardheader aligncenter flex f-16 c_000">
        <div class="line mr_8"></div>
        联系信息
      </div>
      <div class="cardbody">
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">联系人：</div>
          <div class="item_content overflowtext">{{ form.username }}</div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">联系电话：</div>
          <div class="item_content overflowtext">{{ form.mobile }}</div>
        </div>
        <div class="flex itembox c_2B2B2B f-14 mt_20">
          <div class="item_title ">企业地址：</div>
          <div class="item_content overflowtext">{{ form.address }}</div>
        </div>
      </div>
    </div>

    <div slot="footer" class="footer-btn">
      <el-button @click="getShowReject">驳回</el-button>
      <el-button type="primary" @click="onSubmit">审核通过</el-button>
    </div>
    <viewImg v-if="showBigImg" :visableIf.sync="showBigImg" :imgUrl="imgUrl"></viewImg>
    <reject v-if="showReject" :visableIf.sync="showReject" :custom_id="$attrs.rowitem.custom_id"  @closeParentDialog="handleCloseDialog"v @getBiglist="getBiglist"></reject>
  </el-dialog>
</template>

<script>
import { reqAccountCheckInfo, reqAccountCheckPassData } from '@/api/trafficMasterMgt'
import { userInfo } from '@/api/advmaster'
import viewImg from './viewImg.vue'
import reject from './reject.vue'
export default {
  name: 'viewCoordinate',
  components:{
    reject,
    viewImg
  },
  data() {
    return {
      showReject:false,
      showBigImg:false,//预览图片
      imgUrl:null,//预览大图路径
      form: {
        type_text: null,//主体名称
        type: 0,//收款账号类型
        main_type: null,//主体类型
        bln_name: null,//开户名称
        bln: null,//营业执照编号
        bl_photo: null,//营业执照照片
        bank_prove_photo: null,//开户证明照片
        bankcard: null,//银行账号
        bank_province: null,//省
        bank_city: null,//市
        bank: null,//银行的英文
        bank_name: null,//银行的中文
        bank_branch: null,//银行支行
        email: null,//邮政地址
        username: null,//企业联系人
        mobile: null,//联系电话
        address: null//企业地址

      }
    }
  },
  created() {
    this.getAccountCheckInfo();
    this.getInfo();
  },
  methods: {
    getBiglist(){
      this.$emit('getList');
    },
    onSubmit() {
      let form={
        id:this.$attrs.rowitem.custom_id,
      }
      this.$modal.confirm(`确定要审批通过吗？`).then(() => {
        reqAccountCheckPassData(form).then(res => {
          this.$modal.msgSuccess('提交成功！');
          this.$emit('getList');
          this.handleCloseDialog();
        })

      })
    },
    getShowReject(){
      this.showReject=true;
    },
    getBigImg(url){
      if(url){
        this.imgUrl=url;
        this.showBigImg=true;
      }
    },
    getAccountCheckInfo() {
      let form = {
        type: 0,
        id: this.$attrs.rowitem.custom_id
      }
      reqAccountCheckInfo(form).then(res => {
        console.log('信息---', res.data)

        this.form.email=res.data.email;
        this.form.address=res.data.address;
        this.form.mobile=res.data.mobile;
        this.form.username=res.data.username;
        this.form.bank_province=res.data.bank_province;
        this.form.bank_city=res.data.bank_city;
        this.form.bank_name = res.data.bank_name;
        this.form.type=res.data.type;
        this.form.bln=res.data.bln;
        this.form.bank_branch=res.data.bank_branch;
        this.form.bl_photo = res.data.bl_photo;
        this.form.bank_prove_photo=res.data.bank_prove_photo;
      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false)
    },
    // 获取info信息
    getInfo() {
      userInfo({ id: this.$attrs.rowitem.custom_id }).then(res => {
        let user = res.data
        this.form.main_type = user.main.type;
        this.form.type_text = user.main.type_text;
        this.form.type_name = user.main.type_name;
        this.form.bln_name=user.industry.bln_name;
        this.form.bankcard = user.invoice.bank_crad;
        this.form.invoice_name = user.invoice.invoice_name;
        this.form.email = user.email;
      }).catch(() => {
        this.all_loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: calc(100vh - 250px);
}

.cardbox {
  padding: 16px;
  background-color: #F7F7F7;
}

.cardheader {
  border-bottom: 1px solid #E2E2E2;
  padding-bottom: 15px;

  .line {
    width: 2px;
    background-color: #1670f1;
    height: 18px;
  }
}

.itembox {
  .item_title {
    width: 120px;
  }

  .item_content {
    width: calc(100% - 120px);
  }

  .imgitem {
    width: 120px;
    height:120px;
    object-fit: cover;
    cursor: pointer;
  }
}

.cardbody {
  padding-bottom: 12px;
}
</style>
